<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>叮当猫</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            position: relative;
            width: 800px;
            height: 600px;
            border: 2px solid transparent;
            transition: all linear 2s;
        }

        .box:active {

            transform: translate(800px, 150px) rotate3d(9, 7, 10, 360deg) scale(1.5) skew(30deg);
        }

        .header {
            width: 300px;
            height: 280px;
            border-radius: 50%;
            background: #0093dd;
            position: relative;
            margin: 20px auto;
            overflow: hidden;
        }

        .header1 {
            width: 260px;
            height: 240px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            left: 0px;
            top: 40px;
            margin: 0px auto;
            right: 0px;
            z-index: 4;
        }

        .arml {
            position: absolute;
            top: 245px;
            left: 205px;
            width: 120px;
            height: 60px;
            border-radius: 40px;
            background-color: #0093dd;
            transform: rotate(190deg);
            z-index: 2;
        }

        .arml::after {
            content: "";
            position: absolute;
            left: 70px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 1px solid #666;
            background-color: #fff;
        }

        .armr {
            position: absolute;
            top: 245px;
            right: 205px;
            width: 120px;
            height: 60px;
            border-radius: 40px;
            background-color: #0093dd;
            transform: rotate(-10deg);
            z-index: 2;
        }

        .armr::after {
            content: "";
            position: absolute;
            right: -10px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 1px solid #666;
            background-color: #fff;
        }


        .eye {
            width: 150px;
            height: 55px;
            position: absolute;
            left: 0px;
            right: 0px;
            margin: -20px auto;
        }

        .eye::before,
        .eye::after {
            content: "";
            position: absolute;
            top: 35px;
            width: 60px;
            height: 55px;
            border-radius: 50%;
            border: 1px solid #999;
            background-color: #fff;
            z-index: 6;
        }

        .eye::before {
            left: -2px;
        }

        .eye::after {
            right: -2px;
        }

        .eye1 {
            position: absolute;
            left: 10px;
            top: 10px;
            width: 130px;
            height: 40px;
            z-index: 6;
        }

        .eye1::before,
        .eye1::after {
            content: "";
            position: absolute;
            top: 25px;
            width: 30px;
            height: 28px;
            border-radius: 50%;
            background-color: #000;
        }

        .eye1::before {
            left: 80px;
        }

        .eye1::after {
            right: -65px;
        }

        .eye2 {
            position: absolute;
            left: 15px;
            top: 20px;
            width: 100px;
            height: 15px;
            z-index: 6;
        }

        .eye2::before,
        .eye2::after {
            content: "";
            position: absolute;
            top: 25px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #fff;
        }

        .eye2::before {
            left: 90px;
        }

        .eye2::after {
            right: -75px;
        }

        .nose {
            position: absolute;
            left: 130px;
            top: 75px;
            width: 40px;
            height: 30px;
            background-color: #DA251C;
            border-radius: 50%;
            z-index: 5;
        }

        .beard {
            position: absolute;
            left: 50%;
            top: 105px;
            width: 1px;
            height: 60px;
            z-index: 6;
            background-color: #ccc;
        }

        .beard1 {
            position: absolute;
            left: 49px;
            /* top: 120px; */
            width: 200px;
            height: 50px;
            border-left: 1px solid #999;
            border-right: 1px solid #999;
            border-bottom: 1px solid #999;
            border-top: transparent;
            border-radius: 50%;
            background-color: #fff;
            z-index: 5;
            overflow: hidden;
        }

        .beard2 {
            position: absolute;
            left: 55px;
            top: 55px;
            width: 190px;
            height: 210px;
            border-radius: 50%;
            background-color: #DA251C;
            overflow: hidden;
            z-index: 4;
        }

        .beard3 {
            position: absolute;
            left: 45px;
            top: 50px;
            width: 210px;
            height: 115px;
            border-radius: 50%;
            background-color: #fff;
            z-index: 4;
        }

        .mouse {
            position: absolute;
            left: 25px;
            bottom: -25px;
            width: 140px;
            height: 80px;
            border-radius: 50%;
            border: 1px solid #000;
            background-color: #e57715;
            z-index: 4;
        }

        .content {
            position: absolute;
            left: 285px;
            top: 215px;
            width: 230px;
            height: 260px;
            border-radius: 50%;
            background-color: #0093dd;
            z-index: 3;
        }

        .yuan {
            position: absolute;
            left: 20px;
            bottom: 30px;
            width: 190px;
            height: 160px;
            border-radius: 50%;
            background-color: #fff;
            border: 1px solid #999;
            z-index: 3;

        }

        .koudai {
            position: absolute;
            left: 35px;
            top: 15px;
            width: 120px;
            height: 120px;
            border-left: 1px solid #666;
            border-bottom: 1px solid #666;
            border-right: 1px solid #666;
            border-top: transparent;
            border-radius: 50%;
            z-index: 3;

        }

        .koudai1 {
            position: absolute;
            left: 35px;
            top: 0px;
            border-radius: 50px 50px 0 0;
            border-right: 2px solid transparent;
            border-bottom: 1px solid #666;
            width: 120px;
            height: 85px;
            background-color: #fff;
            z-index: 3;

        }

        .lingdai {
            position: absolute;
            left: -5px;
            top: -105px;
            width: 200px;
            height: 135px;
            border-radius: 50%;
            background-color: #da251c;
            z-index: 3;
        }

        .lingdang {
            position: absolute;
            left: 95px;
            top: 85px;
            width: 40px;
            height: 40px;
            border: 1px solid #666;
            background-color: #fef401;
            border-radius: 50%;
            z-index: 4;
        }

        .lingdang1 {
            position: absolute;
            width: 46px;
            height: 6px;
            left: -4px;
            top: 13px;
            border-radius: 20px;
            border: 1px solid #333;
            background-color: #fef401;
            z-index: 4;
        }

        .lingdang2 {
            position: absolute;
            left: 14px;
            top: 23px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid #333;
            background-color: #666;
            z-index: 4;
        }

        .lingdang3 {
            position: absolute;
            left: 19px;
            top: 32px;
            width: 0;
            height: 6px;
            border: 1px solid #666;
            z-index: 4;

        }

        .footer1 {
            position: absolute;
            left: 25px;
            bottom: -30px;
            width: 90px;
            height: 130px;
            border-radius: 50px;
            background-color: #0093dd;
            z-index: 1;

        }

        .footer2 {
            position: absolute;
            left: 120px;
            bottom: -30px;
            width: 90px;
            height: 130px;
            border-radius: 50px;
            background-color: #0093dd;
            z-index: 1;

        }

        .footer3 {
            position: absolute;
            bottom: -50px;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #fff;
            border: 1px solid #666;
        }

        .footer3 {
            left: 30px;
        }

        .footer4 {
            position: absolute;
            bottom: -50px;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #fff;
            border: 1px solid #666;
        }

        .footer4 {
            right: 25px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="header">
            <div class="header1"></div>
            <div class="eye"></div>
            <div class="eye1"></div>
            <div class="eye2"></div>
            <div class="nose"></div>
            <div class="beard"></div>
            <div class="beard1"></div>
            <div class="beard2">
                <div class="mouse"></div>
            </div>
            <div class="beard3"></div>
        </div>
        <div class="content">
            <div class="yuan">
                <div class="koudai"></div>
                <div class="koudai1"></div>
                <div class="lingdai"></div>
            </div>
            <div class="lingdang">
                <div class="lingdang1"></div>
                <div class="lingdang2"></div>
                <div class="lingdang3"></div>
            </div>
            <div class="footer1"></div>
            <div class="footer2"></div>
            <div class="footer3"></div>
            <div class="footer4"></div>
        </div>
        <div class="arml"></div>
        <div class="armr"></div>
    </div>
</body>

</html>